<template>
    <div class="home">
      <el-button @click="person.y=10">添加字段</el-button>
      <el-button @click="handleChangeData">改变</el-button>
      <Child :data="person" @changeData="handleChangeData"/>
    </div>
  </template>
   
  <script>
    import Child from './Child.vue';
    export default {
      data() {
        return {
          person: {
            name:null,
            // y:null
          }
        }
      },
      components:{ Child },
      //使用watch监听器，当不点击按钮的时候不会触发
      // watch: {
      //   person: {
      //     handler(newValue, oldValue) {//这里的第一个参数是改变后的值，第二个参数是原来的值
      //       console.log('改后的值是：' , newValue)
      //       console.log('原来的值是：' , oldValue)
      //     },
      //     // deep:true,//深度监听
      //   }
      // },
      // computed:{
      // // 使用计算属性进行深拷贝
      //   newPerson(){
      //     console.log('computed...');
      //     // return JSON.parse(JSON.stringify(this.person))
      //     return this.person.y;
      //   }
      // },
      methods:{
        handleChangeData(){
          this.person.y = 10;
          this.person = { ...this.person  };
        }
      }
    }
  </script>